<template>
    <div style="display: flex">
        <div width="200">
            <div style="margin-bottom: 10px;">
                <a href="javascript:;" @click="add" class="btn btn-primary btn-mini">添加触发器</a>
                <a href="javascript:;" @click="remove" class="btn btn-danger btn-mini">删除触发器</a>
            </div>
            <select name="" id="" size="20" v-model="index" class="form-control">
                <option :value="i" v-for="(v,i) in data.list">{{v.name}}</option>
            </select>
        </div>
        <div  style="flex: 1; padding-left: 10px; padding-right: 10px;">
            <template v-if="index > -1">
                <div class="form-group-sm">
                    <label >
                        触发器名
                    </label>
                    <input type="text" class="form-control" v-model="data.list[index].name">
                </div>
                <div class="form-group-sm">
                    <label for="">
                        事件
                    </label>
                    <select v-model="data.list[index].event" class="form-control">
                        <option value="EVENT_LOOP">定时触发</option>
                        <option value="EVENT_CREATE">当任务被创建</option>
                        <option value="EVENT_SAVE">当任务被保存</option>
                        <option value="EVENT_GO_NEXT">当任务被提交</option>
                        <option value="EVENT_END">当任务完结</option>
                        <option value="EVENT_MQ">从MQ中接受消息</option>
                        <!--                    <option value="EVENT_LOOP">每过</option>-->
                    </select>
                    <div v-if="data.list[index].event == 'EVENT_LOOP'" style="padding-top: 10px;padding-bottom: 10px;">
                        每过
                        <input type="text" v-model="data.list[index].loop">
                        <select v-model="data.list[index].unit">
                            <option value="second">秒</option>
                            <option value="hour">小时</option>
                        </select>
                        <p>
                            (秒只用来测试，正式环境即使设置也无效，小于30秒的当30秒算)
                        </p>
                    </div>
                </div>
                <div class="form-group-sm">
                    <label for="">
                        条件
                    </label>
                    <trigger-condition :data="data.list[index]"></trigger-condition>
                </div>
                <div class="form-group-sm">
                    <label for="">行为</label>
                    <trigger-action :data="data.list[index]"></trigger-action>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
    loadComponent("trigger-condition", "./trigger.condition.html");
    loadComponent("trigger-action", "./trigger.action.html");

    var component = {
        props:["data"],
        data(){
            return {
                index: -1
            }
        },
        watch:{
            index(nv){
            }
        },
        methods:{
            remove(){
                if(this.index > -1){
                    var idex = this.index;
                    this.index = -1;
                    this.data.list.splice(idex, 1);
                }
            },
            add(){
                this.data.list.push({
                    name: "新触发器",
                    event: "EVENT_SAVE",
                    step: "",
                    unit: "hour",
                    condition:[],
                    action:[]
                });
                this.index = this.data.list.length - 1;
            }
        },
        created(){
            Vue.set(this, "data", this.data || {});
            Vue.set(this.data, "list", this.data.list || []);
        }
    }
</script>